<template>
    <div>
        <van-uploader style="display:none;" id="sendUploadPic" :after-read="sendPicMsg" accept="image/*" :max-size="1024000" @oversize="$toast('图片大小限制，建议上传10M以内的图片。');">
        </van-uploader>
        <audio style="display:none;" ref="newmsg" src="../assets/2.mp3"></audio>
        <audio style="display:none;" ref="subscribe" src="../assets/1.mp3"></audio>
        <audio style="display:none;" ref="unsubscribe" src="../assets/3.mp3"></audio>
            <div id="loading" ref="pagesLoad" v-if="pagesLoad">
            <img src="../assets/aaa.svg"/>
        </div>
        <UserTransfer :isshow="isshow.UserTransfer"></UserTransfer>
        <bookingMsg :isshow="isshow.bookingMsg"></bookingMsg>
        <div id="show_user_info" :class="{open:isshow.user_info}">
            <van-nav-bar  title="用户信息"  left-arrow  @click-left="msgBoxGoBack" />
            <div class="show_user_info">
                <div class="wx_user_info">
                    <img class="bg" :src="msg_user.headimgurl" alt="">
                    <div class="headpic">
                        <img :src="msg_user.headimgurl" alt="">
                    </div>
                    <p class="nickname">{{msg_user.nickname}}</p>
                </div>
                <van-cell-group>
                    <van-field v-model="edit_user_info.wechat_num" clearable label="微信号"  placeholder="请输入微信号"/>
                    <van-field v-model="edit_user_info.name" clearable label="姓名"  placeholder="请输入用户姓名"/>
                    <van-field v-model="edit_user_info.phone" clearable label="联系方式" placeholder="用户联系方式"/>
                    <van-field v-model="edit_user_info.age" clearable label="年龄"  placeholder="用户年龄"/>
                    <van-field v-model="edit_user_info.remark" type="textarea" clearable label="备注"  placeholder="请输入备注"/>
                </van-cell-group>
                <van-button :loading="isshow.sendUserInfo" @click="sendUserInfo" class="save_btn" size="large">保存</van-button>
            </div>
        </div>
        <div id="show_user_tags" :class="{open:isshow.user_tags}">
            <van-nav-bar  title="用户标签"  left-arrow  @click-left="msgBoxGoBack" />
            <div class="show_user_tags" v-if="tags_obj">
                <div class="user_tags">
                    <p class="title" style="margin-bottom:5px;">用户标签</p>


                    <V-tags v-for="(item,index) in msg_user.tagid_list" :key="index" 
                    :tid="tags_obj.list[item].group_id" :isselect="true" :isload="false" :ccolor="tags_obj.list[item].color?tags_obj.list[item].color:'#c9c9c9'">{{tags_obj.list[item].name}}</V-tags>
                </div>
                <div class="edit_user_tags">
                    <br><br>
                    <p class="title"><van-icon name="edit" />编辑标签</p>
                    <div class="item" v-for="(item,index) in tags_obj.group" :key="index">
                        <p class="title">{{item.name}}</p>
                        <V-tags v-for="(items,indexs) in item.s_label" :key="indexs" :ccolor="items.color?items.color:'#c9c9c9'"
                        :tid="items.group_id" :isselect="msg_user.tagid_list.indexOf(items.group_id.toString()) != -1" :isload="false" :color="items.color">{{items.name}}</V-tags>
                    </div>
                </div>
            </div>
        </div>
        <div id="msg_box">
            <div class="top" tabindex="0" @focus="closeMsgBoxItem">
                <van-nav-bar  :title="msg_user.nickname"  left-arrow  @click-left="msgBoxGoBack">
                    <van-icon name="contact" slot="right" @click.native="openSetUserInfo"/>
                </van-nav-bar>
            </div>
            <div  tabindex="0" @focus="closeMsgBoxItem" class="msg" @scroll="msgScrollFn" ref="msglist" :class="{open:isshow.msg_box_item.isopen}">
                <div class="more" :class="{open:msgScroll.is_top}" :login="msgScroll.is_login?1:0">
                    <span @click="getMoreList">查看更多消息</span>
                    <i class="logins">
                        <img src="../assets/loading.gif" alt="">
                    </i>
                </div>
                <div class="list"  v-chat-scroll>
                    <div class="item" :class="'time_'+item.send_time" v-for="(item,index) in msg_user.msg_list" :key="index" :type="item.send_type">
                        <div v-if="index == 0">
                            <div class="showtime">
                                <span v-if="Date.parse(new Date())/1000 - item.send_time < 86400">{{item.send_time|formatDate('hh:mm')}}</span>
                                <span v-else>{{item.send_time|formatDate('MM-dd')}}</span>
                            </div>
                        </div>
                        <div v-else>
                            <div class="showtime" v-if="item.send_time - msg_user.msg_list[index -1].send_time > 300">
                                <span v-if="Date.parse(new Date())/1000 - item.send_time < 86400">{{item.send_time|formatDate('hh:mm')}}</span>
                            </div>
                        </div>
                        <div class="tips" v-if="item.type == 'unsubscribe' || item.type == 'subscribe'">
                            <span v-if="item.type == 'unsubscribe'">该用户取消关注:{{item.send_time|formatDate}}</span>
                            <span v-if="item.type == 'subscribe'">新用户关注:{{item.send_time|formatDate}}</span>
                        </div>
                        
                        <div class="headpic" @click="openSetUserInfo" v-if="item.send_type == 1001 && item.type !='unsubscribe' && item.type != 'subscribe'">
                            <img :src="msg_user.headimgurl">
                        </div>
                        <div class="headpic" v-else-if="item.send_type == 1002 && item.type !='unsubscribe' && item.type != 'subscribe'">
                            <img :src="cs_user.header_url?URL.server+cs_user.header_url:'http://suo.im/4nci1t'">
                        </div>
                        <div class="content" v-if="item.type == 'text'&&item.type !='unsubscribe' && item.type != 'subscribe'" type="text">
                            <pre>{{item.content == '【收到不支持的消息类型，暂无法显示】'?'【对方向您发送了一个表情】':item.content}}</pre>
                            <div class="status" :type="item.send_state" v-if="item.send_type == 1002"></div>
                        </div>
                        <div class="content pic" v-if="item.type == 'image'&&item.type !='unsubscribe' && item.type != 'subscribe'" type="text">
                            <img class="msgpic" preview="0"  :src="item.content|formatPicPath"/>
                            <div class="status" :type="item.send_state" v-if="item.send_type == 1002"></div>
                        </div>
                        <div class="content" v-if="item.type == 'voice'&&item.type !='unsubscribe' && item.type != 'subscribe'" type="text">
                            <!-- <audio controls :src="item.content|formatPicPath"></audio> -->
                            <M-audio :type="item.send_type" :audiopath="item.content|formatPicPath" :times="item.send_time"></M-audio>
                            <!-- <a :href="item.content|formatPicPath">{{item.content}}</a> -->
                            <div class="status" :type="item.send_state" v-if="item.send_type == 1002"></div>
                        </div>
                        <div class="content video" v-if="item.type == 'video'&&item.type !='unsubscribe' && item.type != 'subscribe'" type="text">
                            <!-- <audio controls :src="item.content|formatPicPath"></audio> -->
                            <M-video :type="item.send_type" :video="item.content|formatVideoPath(1)" :thumb="item.content|formatVideoPath(2)" :times="item.send_time"></M-video>
                            <!-- <a :href="item.content|formatPicPath">{{item.content}}</a> -->
                            <div class="status" :type="item.send_state" v-if="item.send_type == 1002"></div>
                        </div>
                    </div>
                    
                </div>
                <div id="gundongdaodibu"></div>
            </div>
            <div tabindex="0"  class="input" :class="{open:isshow.msg_box_item.isopen}">
                <div @click="openMsgBoxItem('voice')" class="voice opt_btn"><img src="../assets/yuyin.png" alt=""></div>
                <textarea   @focus="closeMsgBoxItem" ref="msg_input" @keydown="enterMsg" type="text" v-model="msg_user.msg_input"  placeholder="请输入消息..."></textarea>
                <div @click="openMsgBoxItem('faces')" class="faces opt_btn"><img src="../assets/face.png" alt=""></div>
                <div v-if="!msg_user.msg_input" @click="openMsgBoxItem('more')" class="more opt_btn"><img src="../assets/more.png" alt=""></div>
                <button v-if="msg_user.msg_input" @click="sendTextMsg">发送</button>
            </div>
            <div  @click.stop="stopdefault" class="optbox" :class="{open:isshow.msg_box_item.isopen}" :type="isshow.msg_box_item.type"
             tabindex="0">
              <!-- -->
                <van-row gutter="10" v-if="isshow.msg_box_item.type == 'more'">
                    <van-col span="6" class="item" @click.native="openSengPic">
                        <div class="icon">
                            <img src="../assets/pic.png" />
                        </div>
                        <span>相片</span>
                    </van-col>
                    <van-col span="6" class="item" @click.native="$router.push({path:'/msgbox/'+$route.params.userId+'?type=show_user_tags'})">
                        <div class="icon">
                            <img src="../assets/tagso.png" />
                        </div>
                        <span>标签</span>
                    </van-col>
                    <van-col span="6" class="item" @click.native="$router.push({path:'/chatrecord/'+$route.params.userId})">
                        <div class="icon">
                            <img src="../assets/jilu.png" />
                        </div>
                        <span>聊天记录</span>
                    </van-col>
                    <!-- <van-col span="6" class="item" @click.native="userTransfer">
                        <div class="icon">
                            <img src="../assets/zhuanjie.png" />
                        </div>
                        <span>用户转接</span>
                    </van-col> -->
                    <van-col span="6" class="item" @click.native="bookingMsg">
                        <div class="icon">
                            <img src="../assets/zhuanjie.png" />
                        </div>
                        <span>定时消息</span>   
                    </van-col>
                </van-row>
                <span v-else-if="isshow.msg_box_item.type == 'voice'" @touchstart="startRecord" @touchend="endRecord">
                </span>
                <div class="imgpic" v-else-if="isshow.msg_box_item.type == 'faces'">
                    <img @click="addendFaces(item.value)" :src="item.url" :value="item.value" v-for="(item,index) in face_list.list" :key="index"  />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Maudio from './m-audio';
    import Mvideo from './m-video';
    import Vtags from './Vtags';
    import UserTransfer from './UserTransfer';
    import bookingMsg from './bookingMsg';
    // var createPlayer = require('web-audio-player')
    var MicRecorder = require('mic-recorder-to-mp3');
    var recorder = new MicRecorder({
        bitRate: 128
    });
    export default {
        name: "Index",
        data() {
            return {
                sendAudioErr:false,
                pagesLoad:true,
                msgScroll:{
                    is_top:false,
                    is_login:false,
                },
                cs_user:{},
                msg_user:{},
                tags_obj:null,
                isshow:{
                    msg_box_item:{
                        isopen:false,
                        type:''
                    },
                    user_info:false,
                    user_tags:false,
                    sendUserInfo:false,
                    UserTransfer:false,
                    bookingMsg:false
                },
                face_list:{
                    isopen:false,
                    list:[
                        { value: "[微笑]", url: "http://crm.wqc.so/assets/expression/0.gif" },
                        { value: "[撇嘴]", url: "http://crm.wqc.so/assets/expression/1.gif" },
                        { value: "[色]", url: "http://crm.wqc.so/assets/expression/2.gif" },
                        { value: "[发呆]", url: "http://crm.wqc.so/assets/expression/3.gif" },
                        { value: "[得意]", url: "http://crm.wqc.so/assets/expression/4.gif" },
                        { value: "[流泪]", url: "http://crm.wqc.so/assets/expression/5.gif" },
                        { value: "[害羞]", url: "http://crm.wqc.so/assets/expression/6.gif" },
                        { value: "[闭嘴]", url: "http://crm.wqc.so/assets/expression/7.gif" },
                        { value: "[睡]", url: "http://crm.wqc.so/assets/expression/8.gif" },
                        { value: "[大哭]", url: "http://crm.wqc.so/assets/expression/9.gif" },
                        { value: "[尴尬]", url: "http://crm.wqc.so/assets/expression/10.gif" },
                        { value: "[发怒]", url: "http://crm.wqc.so/assets/expression/11.gif" },
                        { value: "[调皮]", url: "http://crm.wqc.so/assets/expression/12.gif" },
                        { value: "[呲牙]", url: "http://crm.wqc.so/assets/expression/13.gif" },
                        { value: "[惊讶]", url: "http://crm.wqc.so/assets/expression/14.gif" },
                        { value: "[难过]", url: "http://crm.wqc.so/assets/expression/15.gif" },
                        { value: "[酷]", url: "http://crm.wqc.so/assets/expression/16.gif" },
                        { value: "[冷汗]", url: "http://crm.wqc.so/assets/expression/17.gif" },
                        { value: "[抓狂]", url: "http://crm.wqc.so/assets/expression/18.gif" },
                        { value: "[吐]", url: "http://crm.wqc.so/assets/expression/19.gif" },
                        { value: "[偷笑]", url: "http://crm.wqc.so/assets/expression/20.gif" },
                        { value: "[愉快]", url: "http://crm.wqc.so/assets/expression/21.gif" },
                        { value: "[白眼]", url: "http://crm.wqc.so/assets/expression/22.gif" },
                        { value: "[傲慢]", url: "http://crm.wqc.so/assets/expression/23.gif" },
                        { value: "[饥饿]", url: "http://crm.wqc.so/assets/expression/24.gif" },
                        { value: "[困]", url: "http://crm.wqc.so/assets/expression/25.gif" },
                        { value: "[惊恐]", url: "http://crm.wqc.so/assets/expression/26.gif" },
                        { value: "[流汗]", url: "http://crm.wqc.so/assets/expression/27.gif" },
                        { value: "[憨笑]", url: "http://crm.wqc.so/assets/expression/28.gif" },
                        { value: "[悠闲]", url: "http://crm.wqc.so/assets/expression/29.gif" },
                        { value: "[奋斗]", url: "http://crm.wqc.so/assets/expression/30.gif" },
                        { value: "[咒骂]", url: "http://crm.wqc.so/assets/expression/31.gif" },
                        { value: "[疑问]", url: "http://crm.wqc.so/assets/expression/32.gif" },
                        { value: "[嘘]", url: "http://crm.wqc.so/assets/expression/33.gif" },
                        { value: "[晕]", url: "http://crm.wqc.so/assets/expression/34.gif" },
                        { value: "[疯了]", url: "http://crm.wqc.so/assets/expression/35.gif" },
                        { value: "[衰]", url: "http://crm.wqc.so/assets/expression/36.gif" },
                        { value: "[骷髅]", url: "http://crm.wqc.so/assets/expression/37.gif" },
                        { value: "[敲打]", url: "http://crm.wqc.so/assets/expression/38.gif" },
                        { value: "[再见]", url: "http://crm.wqc.so/assets/expression/39.gif" },
                        { value: "[擦汗]", url: "http://crm.wqc.so/assets/expression/40.gif" },
                        { value: "[抠鼻]", url: "http://crm.wqc.so/assets/expression/41.gif" },
                        { value: "[鼓掌]", url: "http://crm.wqc.so/assets/expression/42.gif" },
                        { value: "[糗大了]", url: "http://crm.wqc.so/assets/expression/43.gif" },
                        { value: "[坏笑]", url: "http://crm.wqc.so/assets/expression/44.gif" },
                        { value: "[左哼哼]", url: "http://crm.wqc.so/assets/expression/45.gif" },
                        { value: "[右哼哼]", url: "http://crm.wqc.so/assets/expression/46.gif" },
                        { value: "[哈欠]", url: "http://crm.wqc.so/assets/expression/47.gif" },
                        { value: "[鄙视]", url: "http://crm.wqc.so/assets/expression/48.gif" },
                        { value: "[委屈]", url: "http://crm.wqc.so/assets/expression/49.gif" },
                        { value: "[快哭了]", url: "http://crm.wqc.so/assets/expression/50.gif" },
                        { value: "[阴险]", url: "http://crm.wqc.so/assets/expression/51.gif" },
                        { value: "[亲亲]", url: "http://crm.wqc.so/assets/expression/52.gif" },
                        { value: "[吓]", url: "http://crm.wqc.so/assets/expression/53.gif" },
                        { value: "[可怜]", url: "http://crm.wqc.so/assets/expression/54.gif" },
                        { value: "[菜刀]", url: "http://crm.wqc.so/assets/expression/55.gif" },
                        { value: "[西瓜]", url: "http://crm.wqc.so/assets/expression/56.gif" },
                        { value: "[啤酒]", url: "http://crm.wqc.so/assets/expression/57.gif" },
                        { value: "[篮球]", url: "http://crm.wqc.so/assets/expression/58.gif" },
                        { value: "[乒乓]", url: "http://crm.wqc.so/assets/expression/59.gif" },
                        { value: "[咖啡]", url: "http://crm.wqc.so/assets/expression/60.gif" },
                        { value: "[饭]", url: "http://crm.wqc.so/assets/expression/61.gif" },
                        { value: "[猪头]", url: "http://crm.wqc.so/assets/expression/62.gif" },
                        { value: "[玫瑰]", url: "http://crm.wqc.so/assets/expression/63.gif" },
                        { value: "[凋谢]", url: "http://crm.wqc.so/assets/expression/64.gif" },
                        { value: "[嘴唇]", url: "http://crm.wqc.so/assets/expression/65.gif" },
                        { value: "[爱心]", url: "http://crm.wqc.so/assets/expression/66.gif" },
                        { value: "[心碎]", url: "http://crm.wqc.so/assets/expression/67.gif" },
                        { value: "[蛋糕]", url: "http://crm.wqc.so/assets/expression/68.gif" },
                        { value: "[闪电]", url: "http://crm.wqc.so/assets/expression/69.gif" },
                        { value: "[炸弹]", url: "http://crm.wqc.so/assets/expression/70.gif" },
                        { value: "[刀]", url: "http://crm.wqc.so/assets/expression/71.gif" },
                        { value: "[足球]", url: "http://crm.wqc.so/assets/expression/72.gif" },
                        { value: "[瓢虫]", url: "http://crm.wqc.so/assets/expression/73.gif" },
                        { value: "[便便]", url: "http://crm.wqc.so/assets/expression/74.gif" },
                        { value: "[月亮]", url: "http://crm.wqc.so/assets/expression/75.gif" },
                        { value: "[太阳]", url: "http://crm.wqc.so/assets/expression/76.gif" },
                        { value: "[礼物]", url: "http://crm.wqc.so/assets/expression/77.gif" },
                        { value: "[拥抱]", url: "http://crm.wqc.so/assets/expression/78.gif" },
                        { value: "[强]", url: "http://crm.wqc.so/assets/expression/79.gif" },
                        { value: "[弱]", url: "http://crm.wqc.so/assets/expression/80.gif" },
                        { value: "[握手]", url: "http://crm.wqc.so/assets/expression/81.gif" },
                        { value: "[胜利]", url: "http://crm.wqc.so/assets/expression/82.gif" },
                        { value: "[抱拳]", url: "http://crm.wqc.so/assets/expression/83.gif" },
                        { value: "[勾引]", url: "http://crm.wqc.so/assets/expression/84.gif" },
                        { value: "[拳头]", url: "http://crm.wqc.so/assets/expression/85.gif" },
                        { value: "[差劲]", url: "http://crm.wqc.so/assets/expression/86.gif" },
                        { value: "[爱你]", url: "http://crm.wqc.so/assets/expression/87.gif" },
                        { value: "[NO]", url: "http://crm.wqc.so/assets/expression/88.gif" },
                        { value: "[OK]", url: "http://crm.wqc.so/assets/expression/89.gif" },
                        { value: "[爱情]", url: "http://crm.wqc.so/assets/expression/90.gif" },
                        { value: "[飞吻]", url: "http://crm.wqc.so/assets/expression/91.gif" },
                        { value: "[跳跳]", url: "http://crm.wqc.so/assets/expression/92.gif" },
                        { value: "[发抖]", url: "http://crm.wqc.so/assets/expression/93.gif" },
                        { value: "[怄火]", url: "http://crm.wqc.so/assets/expression/94.gif" },
                        { value: "[转圈]", url: "http://crm.wqc.so/assets/expression/95.gif" },
                        { value: "[磕头]", url: "http://crm.wqc.so/assets/expression/96.gif" },
                        { value: "[回头]", url: "http://crm.wqc.so/assets/expression/97.gif" },
                        { value: "[跳绳]", url: "http://crm.wqc.so/assets/expression/98.gif" },
                        { value: "[挥手]", url: "http://crm.wqc.so/assets/expression/99.gif" },
                        { value: "[激动]", url: "http://crm.wqc.so/assets/expression/100.gif" },
                        { value: "[街舞]", url: "http://crm.wqc.so/assets/expression/101.gif" },
                        { value: "[献吻]", url: "http://crm.wqc.so/assets/expression/102.gif" },
                        { value: "[左太极]", url: "http://crm.wqc.so/assets/expression/103.gif" },
                        { value: "[右太极]", url: "http://crm.wqc.so/assets/expression/104.gif" },
                    ]
                },
                text:'',
                edit_user_info:{
                    wechat_num:'',
                    name:'',
                    phone:'',
                    age:'',
                    remark:''
                }
            };
        },
        components: {
            'M-audio': Maudio,
            'M-video': Mvideo,
            'V-tags': Vtags,
            'UserTransfer': UserTransfer,
            'bookingMsg': bookingMsg
        },
        watch: {
            "$route": function(data){
                if(data.name == 'MsgBox'){
                    if(data.query && data.query.type == 'show_user_info'){
                        $vm.MsgBox.isshow.user_tags = false;
                        $vm.MsgBox.isshow.UserTransfer = false;
                        $vm.MsgBox.isshow.bookingMsg = false;
                        $vm.MsgBox.isshow.user_info = true;
                    }else if(data.query && data.query.type == 'user_transfer'){
                        $vm.MsgBox.isshow.user_tags = false;
                        $vm.MsgBox.isshow.user_info = false;
                        $vm.MsgBox.isshow.bookingMsg = false;
                        $vm.MsgBox.isshow.UserTransfer = true;
                    }else if(data.query && data.query.type == 'booking_msg'){
                        $vm.MsgBox.isshow.user_tags = false;
                        $vm.MsgBox.isshow.user_info = false;
                        $vm.MsgBox.isshow.bookingMsg = true;
                        $vm.MsgBox.isshow.UserTransfer = false;
                    }else if(data.query && data.query.type == 'show_user_tags'){
                        new Promise(function(resolve,reject){
                            $.get($vm.MsgBox.URL.server+'/api/Label/getLabel',{
                                auid:$vm.MsgBox.cs_user.auid
                            },function(res){
                                if(typeof res == 'string') res = JSON.parse(res);
                                resolve(res);
                            })
                        }).then((data)=>{
                            return new Promise(function(resolve,reject){
                                var list = {};
                                data.forEach(function(item){
                                    if(item.s_label){
                                        item.s_label.forEach(function(items){
                                            list[items.group_id] = items
                                        });
                                    }
                                });
                                resolve({list:list,group:data});
                            });
                        }).then((obj)=>{
                            let {list,group} = obj;
                            console.log(obj);
                            $vm.MsgBox.tags_obj = obj;
                            $vm.MsgBox.$forceUpdate()
                            console.log($vm.MsgBox.tags_obj);
                        });


                        $vm.MsgBox.isshow.user_info = false;
                        $vm.MsgBox.isshow.bookingMsg = false;
                        $vm.MsgBox.isshow.UserTransfer = false;
                        $vm.MsgBox.isshow.user_tags = true;
                    }else{
                        $vm.MsgBox.isshow.user_info = false;
                        $vm.MsgBox.isshow.user_tags = false;
                        $vm.MsgBox.isshow.bookingMsg = false;
                        $vm.MsgBox.isshow.UserTransfer = false;
                    }
                }
            }
        },
        created: function() {
            window.$vm = window.$vm || {};
            $vm.MsgBox = this;
            if(!$vm.Index){
                $vm.MsgBox.$router.push({path:'/index'})
            }
            $vm.MsgBox.$fn.isLogin((status)=>{
                if(status != 1){//当前未登陆
                    $vm.MsgBox.$router.push({path:'/login'})//跳转到登陆页面
                    return;
                }
                $vm.MsgBox.cs_user = $vm.MsgBox.$fn.getCookie('user');
                $vm.MsgBox.msg_user = $vm.MsgBox.$fn.getMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId);
                console.log($vm.MsgBox.msg_user.openid);
                $.get($vm.MsgBox.URL.server+'/api/User/getSqlUserInfo?openid='+$vm.MsgBox.msg_user.openid,function(res){
                    if(typeof res == 'string') res = JSON.parse(res); 
                    if(typeof res.result.tagid_list == 'object'){
                        var _tagid_list = [];
                        for(var i in res.result.tagid_list){
                            _tagid_list.push(res.result.tagid_list[i]);
                        }
                        res.result.tagid_list = _tagid_list;
                    }
                    console.log(res);
                    if(res.status == 1){
                        res.result.msg_list = $vm.MsgBox.msg_user.msg_list;
                        res.result.new_msg = $vm.MsgBox.msg_user.new_msg;
                        res.result.new_msg_num = $vm.MsgBox.msg_user.new_msg_num;
                        $vm.MsgBox.msg_user = res.result;
                        $vm.MsgBox.$fn.updataMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.msg_user.user_id,$vm.MsgBox.msg_user);
                    }
                    
                });
                $vm.MsgBox.edit_user_info.wechat_num = $vm.MsgBox.msg_user.wechat_num;
                $vm.MsgBox.edit_user_info.name = $vm.MsgBox.msg_user.name;
                $vm.MsgBox.edit_user_info.phone = $vm.MsgBox.msg_user.phone;
                $vm.MsgBox.edit_user_info.age = $vm.MsgBox.msg_user.age;
                $vm.MsgBox.edit_user_info.remark = $vm.MsgBox.msg_user.remark;
                $vm.MsgBox.$forceUpdate()
                setTimeout(function(){document.getElementById('gundongdaodibu').scrollIntoView(false);},100);
                if(!$vm.MsgBox.msg_user.msg_list){
                        $vm.MsgBox.msgScroll.is_login = true;
                        $.post($vm.MsgBox.URL.server+'/api/User/getChatLog',{
                            cs_id:$vm.MsgBox.cs_user.id,
                            openid:$vm.MsgBox.msg_user.openid,
                        },function(res){
                            $vm.MsgBox.msgScroll.is_login = false;
                            $vm.MsgBox.msgScroll.is_top = false;
                            if(typeof res == 'string') res = JSON.parse(res); 
                            if(res.chatlog.length > 1){
                                res.chatlog.reverse();
                            }
                            $vm.MsgBox.msg_user.msg_list = $vm.MsgBox.msg_user.msg_list || []
                            var arr = res.chatlog.concat($vm.MsgBox.msg_user.msg_list);
                            $vm.MsgBox.msg_user.msg_list = arr;
                            $vm.MsgBox.$fn.updataMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.msg_user.user_id,$vm.MsgBox.msg_user);
                            setTimeout(()=>{
                                setTimeout(function(){document.getElementById('gundongdaodibu').scrollIntoView(false);},100);
                            },0)
                        });
                }
                $vm.MsgBox.$socket.emit('re_connect', {
                    user:$vm.MsgBox.cs_user,type:$vm.MsgBox.loginType
                });
            });
        },
        updated () {
            $vm.MsgBox.$previewRefresh()
        },
        methods:{
            stopdefault:()=>{},
            openChatRecord:function(){
                $vm.MsgBox.$router.push({path:'/chatrecord/'+$vm.MsgBox.$route.params.userId})
            },
            messageSync:function(obj){
                obj.msg.send_type = 1002;
                $vm.MsgBox.$socket.emit('message_sync', obj);
            },
            addendFaces:function(value){
                var str = $($vm.MsgBox.$refs.msg_input).val();
                $($vm.MsgBox.$refs.msg_input).val(str + value)
                $vm.MsgBox.msg_user.msg_input = $($vm.MsgBox.$refs.msg_input).val()
                $vm.MsgBox.$forceUpdate()
            },
            msgBoxGoBack:function(){
                $vm.MsgBox.$router.back(-1)
            },
            sendUserInfo:()=>{
                // $vm.MsgBox.isshow.sendUserInfo = true;
                var data = $vm.MsgBox.edit_user_info;
                data.uid = $vm.MsgBox.msg_user.user_id;
                $.post($vm.MsgBox.URL.server+'/api/Customer_service/saveUserOtherMsg',data,function(res){
                    if(typeof res == 'string') res = JSON.parse(res);
                    if(res.status == -1){
                        $vm.MsgBox.isshow.sendUserInfo = false;
                        $vm.MsgBox.$toast('修改失败');
                        return;
                    }
                    var userinfo = res.user_info || {};
                    userinfo.msg_list = $vm.MsgBox.msg_user.msg_list;
                    userinfo.new_msg = $vm.MsgBox.msg_user.new_msg;
                    userinfo.new_msg_num = $vm.MsgBox.msg_user.new_msg_num;
                    var objstr = $vm.MsgBox.$fn.updataMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.msg_user.user_id,userinfo);
                    if(objstr.status == 1){
                        $vm.MsgBox.msg_user = userinfo;
                        $vm.MsgBox.$toast('修改成功');
                    }
                    $vm.MsgBox.isshow.sendUserInfo = false;
                });
            },
            openMsgBoxItem:function(type){
                $vm.MsgBox.isshow.msg_box_item.isopen = true;
                $vm.MsgBox.isshow.msg_box_item.type = type;
                setTimeout(function(){document.getElementById('gundongdaodibu').scrollIntoView(false);},0);
                $('#msg_box .optbox')[0].focus();
            },
            openSengPic:()=>{
                $('#sendUploadPic').click();
            },
            openSetUserInfo:()=>{
                $vm.MsgBox.$router.push({path:'/msgbox/'+$vm.MsgBox.$route.params.userId+'?type=show_user_info'})
            },
            closeMsgBoxItem:function(){
                setTimeout(function(){
                    $vm.MsgBox.isshow.msg_box_item.isopen = false;
                    $vm.MsgBox.isshow.msg_box_item.isopen = '';
                },100);
            },
            userTransfer:function(){
                
                $vm.MsgBox.$router.push({path:'/msgbox/'+$vm.MsgBox.$route.params.userId+'?type=user_transfer'})
            },
            bookingMsg:function(){
                
                $vm.MsgBox.$router.push({path:'/msgbox/'+$vm.MsgBox.$route.params.userId+'?type=booking_msg'})
            },
            enterMsg:function(event){
                if(event.shiftKey && event.keyCode == 13) {
                    console.log('回车');
                    return;
                }
                if(event.keyCode == 13){
                    $vm.MsgBox.sendTextMsg();
                    event.preventDefault();  
                }
            },
            startRecord:function(){//按下发送语音消息
                console.log('开始语音');
                window.resAudioDur = Date.parse(new Date())/1000;
                recorder.start().then(() => {
                    
                    setTimeout(function(){
                        $vm.MsgBox.$toast('只能发送60S的录音');
                        recorder.stop();
                    },1000*60);
                }).catch((e) => {
                    $vm.MsgBox.sendAudioErr = true;
                    $vm.MsgBox.$toast('发送失败，浏览器不支持录音：'+$vm.MsgBox.sendAudioErr);
                });
                return;

                
            },
            endRecord:function(){//送卡结束语音消息
                if($vm.MsgBox.sendAudioErr){
                    $vm.MsgBox.sendAudioErr = false;
                    return;
                }
                var aaaaa = Date.parse(new Date())/1000;  
                if(aaaaa - resAudioDur < 1){
                    $vm.MsgBox.$toast('录制时间太短');
                    return 
                }
                console.log('结束语音');
                recorder.stop().getMp3().then(([buffer, blob]) => {
                    const Mp3file = new File(buffer, 'me-at-thevoice.mp3', {
                        type: blob.type,
                        lastModified: Date.now()
                    });
                    var msgObj = {
                        appid:$vm.MsgBox.cs_user.appid,
                        openid:$vm.MsgBox.msg_user.openid,
                        cs_id:$vm.MsgBox.cs_user.id,
                        type:'voice',
                        voice:Mp3file,
                        content:$vm.MsgBox.$fn.getObjectURL(Mp3file),
                        send_type:1002,
                        send_time:Date.parse(new Date()) / 1000,
                        send_state:2
                    }
                    console.log(msgObj);
                    var fd = new FormData();
                    fd.append("voice", Mp3file);
                    fd.append("appid", $vm.MsgBox.cs_user.appid);
                    fd.append("openid", $vm.MsgBox.msg_user.openid);
                    fd.append("cs_id", $vm.MsgBox.cs_user.id);
                    fd.append("type", 'voice');
                    var result = $vm.MsgBox.$fn.addUserMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId,msgObj);
                    if(result.status == 1){
                        $vm.MsgBox.msg_user = $vm.MsgBox.$fn.getMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId);
                        setTimeout(function(){document.getElementById('gundongdaodibu').scrollIntoView(false);},0);
                        $.ajax({
                            url: $vm.MsgBox.URL.server+'/api/User/sendVoiceForUser',
                            type: 'POST',
                            cache: false,
                            data: fd,
                            processData: false,
                            contentType: false,
                            dataType: "json",
                            beforeSend: function (res) {
                                
                            },
                            success: function (res) {
                                console.log(res);
                                if(typeof res == "string"){
                                    res = JSON.parse(res);
                                }
                                var objss = {
                                    msg:{
                                        type:'voice',
                                        content:$vm.MsgBox.URL.server+res.path,
                                        openid:$vm.MsgBox.msg_user.openid,
                                        appid:$vm.MsgBox.cs_user.appid,
                                        send_time:res.send_time,
                                        cs_id:$vm.MsgBox.cs_user.id
                                    },
                                    type:$vm.MsgBox.$fn.getLoginType()
                                }
                                $vm.MsgBox.messageSync(objss);
                                var getUserMsg = $vm.MsgBox.$fn.getMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId);
                                
                                if(res.status == 1){
                                    getUserMsg.msg_list[result.index].send_state = 1;
                                    getUserMsg.msg_list[result.index].content = $vm.MsgBox.URL.server+res.path;
                                }else{
                                    getUserMsg.msg_list[result.index].send_state = 0
                                }
                                $vm.MsgBox.$fn.updataMsgList($vm.MsgBox.cs_user.id,getUserMsg.user_id,getUserMsg);
                                $vm.MsgBox.msg_user = $vm.MsgBox.$fn.getMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId);
                                $vm.MsgBox.$forceUpdate()
                            }
                        });

                    }
                }).catch((e) => {
                    console.log(e);
                });

                
                


            },
            sendPicMsg:function(files){//发送图片消息
                console.log($vm.MsgBox.$fn.getObjectURL(files.file));
                var msgObj = {
                    appid:$vm.MsgBox.cs_user.appid,
                    openid:$vm.MsgBox.msg_user.openid,
                    cs_id:$vm.MsgBox.cs_user.id,
                    type:'image',
                    image:files.file,
                    content:$vm.MsgBox.$fn.getObjectURL(files.file),
                    send_type:1002,
                    send_time:Date.parse(new Date()) / 1000,
                    send_state:2
                }
                console.log(msgObj);
                var formdata = new FormData();
                formdata.append("appid", msgObj.appid);
                formdata.append("openid", msgObj.openid);
                formdata.append("cs_id", msgObj.cs_id);
                formdata.append("image", msgObj.image);
                formdata.append("type", msgObj.type);
                var result = $vm.MsgBox.$fn.addUserMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId,msgObj);

                // var result = $vm.MsgBox.$fn.addUserMsgList($vm.MsgBox.$route.params.userId,msgObj);
                if(result.status == 1){
                    $vm.MsgBox.msg_user = $vm.MsgBox.$fn.getMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId);
                    setTimeout(function(){document.getElementById('gundongdaodibu').scrollIntoView(false);},0);
                    if($('#msg_box .input input')[0]){
                        $('#msg_box .input input')[0].focus();
                    }
                    $.ajax({
                        url: $vm.MsgBox.URL.server+'/api/User/sengImgForUser',
                        type: 'POST',
                        cache: false,
                        data: formdata,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        beforeSend: function (res) {
                            
                        },
                        success: function (res) {
                            console.log(res);
                            if(typeof res == "string"){
                                res = JSON.parse(res);
                            }
                            var objss = {
                                msg:{
                                    type:'image',
                                    content:$vm.MsgBox.URL.server+res.path,
                                    openid:$vm.MsgBox.msg_user.openid,
                                    appid:$vm.MsgBox.cs_user.appid,
                                    send_time:res.send_time,
                                    cs_id:$vm.MsgBox.cs_user.id
                                },
                                type:$vm.MsgBox.$fn.getLoginType()
                            }
                            $vm.MsgBox.messageSync(objss);

                            var getUserMsg = $vm.MsgBox.$fn.getMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId);
                            
                            if(res.status == 1){
                                getUserMsg.msg_list[result.index].send_state = 1;
                                getUserMsg.msg_list[result.index].content = $vm.MsgBox.URL.server+res.path;
                            }else{
                                getUserMsg.msg_list[result.index].send_state = 0
                            }
                            $vm.MsgBox.$fn.updataMsgList($vm.MsgBox.cs_user.id,getUserMsg.user_id,getUserMsg);
                            $vm.MsgBox.msg_user = $vm.MsgBox.$fn.getMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId);
                            $vm.MsgBox.$forceUpdate()
                        }
                    });
                }
            },
            msgScrollFn:(event)=>{
                if($vm.MsgBox.$refs.msglist.scrollTop <= 15){
                    $vm.MsgBox.msgScroll.is_top = true;
                }else{
                    $vm.MsgBox.msgScroll.is_top = false;
                }
            },
            getMoreList:()=>{
                $vm.MsgBox.msgScroll.is_login = true;
                var indexTime = $vm.MsgBox.msg_user.msg_list[0].send_time;
                console.log(indexTime);
                // var senele = $('.time_'+indexTime)[0];
                // console.log(senele);
                $.post($vm.MsgBox.URL.server+'/api/User/getChatLog',{
                    cs_id:$vm.MsgBox.cs_user.id,
                    openid:$vm.MsgBox.msg_user.openid,
                    last_time:$vm.MsgBox.msg_user.msg_list[0].send_time,
                    // count:1
                },function(res){
                    $vm.MsgBox.msgScroll.is_login = false;
                    $vm.MsgBox.msgScroll.is_top = false;
                    if(typeof res == 'string') res = JSON.parse(res); 
                    if(res.status == -1) return $vm.MsgBox.$toast('没有更多消息了！');;
                    if(res.chatlog.length > 1){
                        res.chatlog.reverse();
                    }
                    var arr = res.chatlog.concat($vm.MsgBox.msg_user.msg_list);
                    $vm.MsgBox.msg_user.msg_list = arr;
                    $vm.MsgBox.$fn.updataMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.msg_user.user_id,$vm.MsgBox.msg_user);
                    setTimeout(()=>{
                        var arr = this.data.split("&")
                        var obj = {};
                        arr.forEach(function(item){
                            obj[item.split("=")[0]] = item.split("=")[1];
                        });
                        $('.time_'+obj.last_time)[0].scrollIntoView(true);
                        // senele.scrollIntoView(true);
                    },0)
                });
            },
            sendTextMsg:function(){//发送文字消息
                var str = $vm.MsgBox.msg_user.msg_input;
                $vm.MsgBox.msg_user.msg_input = '';
                $('#msg_box .input textarea')[0].focus();
                if($vm.MsgBox.$fn.Trim(str,'') == '' || str == ''){
                    $vm.MsgBox.$toast('不能发送空白消息！');
                    return;
                }
                var msgObj = {
                    appid:$vm.MsgBox.cs_user.appid,
                    openid:$vm.MsgBox.msg_user.openid,
                    cs_id:$vm.MsgBox.cs_user.id,
                    type:'text',
                    content:str,
                    send_type:1002,
                    send_time:Date.parse(new Date()) / 1000,
                    send_state:2
                }
                var result = $vm.MsgBox.$fn.addUserMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId,msgObj);
                if(result.status == 1){
                    $vm.MsgBox.msg_user = $vm.MsgBox.$fn.getMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId);
                    setTimeout(function(){document.getElementById('gundongdaodibu').scrollIntoView(false);},0);
                    $.post($vm.MsgBox.URL.server+'/api/User/sengMsgForUser',msgObj,(res)=>{
                        if(typeof res == 'string') res = JSON.parse(res); 
                        var objss = {
                            msg:{
                                type:'text',
                                content:str,
                                openid:$vm.MsgBox.msg_user.openid,
                                appid:$vm.MsgBox.cs_user.appid,
                                send_time:res.send_time,
                                cs_id:$vm.MsgBox.cs_user.id
                            },
                            type:$vm.MsgBox.$fn.getLoginType()
                        }
                        $vm.MsgBox.messageSync(objss);
                        console.log($vm.MsgBox.$route.params.userId);
                        var getUserMsg = $vm.MsgBox.$fn.getMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId);
                        console.log(result);
                        console.log(getUserMsg.msg_list[result.index]);
                        if(res.status == 1){
                            getUserMsg.msg_list[result.index].send_state = 1
                        }else{
                            getUserMsg.msg_list[result.index].send_state = 0
                        }
                        $vm.MsgBox.$fn.updataMsgList($vm.MsgBox.cs_user.id,getUserMsg.user_id,getUserMsg);
                        $vm.MsgBox.msg_user = $vm.MsgBox.$fn.getMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId);
                        $vm.MsgBox.$forceUpdate()
                    });
                }
            }
        },
        sockets:{
            disConnects:function(){
                window.location.reload();
            },
            re_connect:(data)=>{
                console.log(data);
                if(data.status == 1){
                    $.get($vm.MsgBox.URL.server+'/api/login/online',{id:$vm.MsgBox.cs_user.id},function(res){
                        if(res.status == 1){
                            console.log(111111);
                            $vm.MsgBox.cs_user.type = 1;
                            $vm.MsgBox.$fn.setCookie('user',$vm.Index.cs_user);
                        }
                        $vm.MsgBox.pagesLoad = false;
                        $vm.MsgBox.$forceUpdate()
                    });
                }
            },
            sendMsg:(data)=>{
                console.log(data);
                data.send_state = 1;
                var isInUserList = null,
                    isInMsgUserList = null,
                    isInCurrently = null,
                    userInfo = null;
                if(isInUserList != null){
                    userInfo = $vm.Index.user_list.list[isInUserList];
                }
                new Promise(function(success,error){
                    if(userInfo == null){
                        $.get($vm.Index.URL.server+'/api/User/getSqlUserInfo',{openid:data.openid},function(res){
                            if(typeof res == 'string') res = JSON.parse(res);
                            if(typeof res.result.tagid_list == 'object'){
                                var _tagid_list = [];
                                for(var i in res.result.tagid_list){
                                    _tagid_list.push(res.result.tagid_list[i]);
                                }
                                res.result.tagid_list = _tagid_list;
                            }
                            console.log(res);
                            userInfo = res.result;
                            if($vm.Index){
                                $vm.Index.user_list.list.push(userInfo);
                            }
                            success(userInfo);
                        }); 
                    }else{
                        success(userInfo);
                    }
                }).then((userInfo)=>{
                    $vm.Index.msg_user_list.list.some(function(item,index){
                        if(item.openid == data.openid){
                            isInMsgUserList = index
                            return true;
                        }
                        return false;
                    });
                    
                    if(isInMsgUserList == null){
                        $vm.Index.$fn.addMsgList($vm.MsgBox.cs_user.id,userInfo);
                        $vm.Index.msg_user_list.list = $vm.Index.$fn.getMsgList($vm.MsgBox.cs_user.id);
                        isInMsgUserList = $vm.Index.msg_user_list.list.length - 1;
                    }
                    console.log(JSON.parse(JSON.stringify(userInfo)));
                    var result = $vm.Index.$fn.addUserMsgList($vm.MsgBox.cs_user.id,userInfo.user_id,data);
                    // console.log(result);
                    if(result.status == 1){
                        $vm.Index.msg_user_list.list = $vm.Index.$fn.getMsgList($vm.MsgBox.cs_user.id);
                        setTimeout(function(){document.getElementById('gundongdaodibu').scrollIntoView(false);},0);
                        
                    }
                    if(parseInt($vm.MsgBox.$route.params.userId) == userInfo.user_id){
                        $vm.Index.msg_user_list.list[isInMsgUserList].new_msg_num = 0;
                        $vm.MsgBox.msg_user = $vm.MsgBox.$fn.getMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId);
                        // console.log($vm.MsgBox.msg_user);
                    }
                    var notification_content = '';
                    console.log(data);
                    if(data.type == 'text'){
                        notification_content += data.content
                    }else if(data.type == 'image'){
                        notification_content += '【新消息：图片】'
                    }else if(data.type == 'voice'){
                        notification_content = '【新消息：语音】'
                    }else if(data.type == 'subscribe'){
                        notification_content += '【新用户关注】'
                    }else if(data.type == 'unsubscribe'){
                        notification_content += '【用户取消关注】'
                    }
                    console.log(notification_content);
                    Notification.requestPermission(function (permission) {  
                        if (permission == "granted") {
                            var notification = new Notification(userInfo.nickname,{  
                                dir: "auto",  
                                lang: "zh-CN",  
                                tag: "testNotice",  
                                icon:require('../assets/tab01.png'),  
                                body: notification_content
                            });   
                        }
                    })
                    
                    if(data.type=="subscribe"){
                        var cut_audio = document.createElement('audio')
                        cut_audio.src = $vm.MsgBox.URL.node+'/index/mp3/1.mp3';
                        cut_audio.play();
                    }else if(data.type=="unsubscribe"){
                        var cut_audio = document.createElement('audio')
                        cut_audio.src =  $vm.MsgBox.URL.node+'/index/mp3/3.mp3';
                        cut_audio.play();
                    }else{
                        var cut_audio = document.createElement('audio')
                        cut_audio.src =  $vm.MsgBox.URL.node+'/index/mp3/2.mp3';
                        cut_audio.play();
                    }
                    

                    // var audio1;
                    // if(data.type=="subscribe"){
                    //     audio1 = createPlayer(require('../assets/1.mp3'))
                    // }else if(data.type=="unsubscribe"){
                    //     audio1 = createPlayer(require('../assets/3.mp3'))
                    // }else{
                    //     audio1 = createPlayer(require('../assets/2.mp3'))
                    // }
                    // audio1.on('load', () => {
                    //     console.log('Audio1 loaded...')
                    //     audio1.play()
                    //     audio1.node.connect(audio1.context.destination)
                    // })
                })
            }
        }
    };
</script>

<style lang="less">
    *{font-family: 微软雅黑;}

    #msg_box{
        width:100vw;position: fixed;top:40px;left:0;z-index: 9;background:#fff;bottom:0;
        .top{
            height:44px;background:#ffffff;border-bottom: 1px solid #d4d4d4;
            i{
                color:#000;font-weight: 600;
            }
        }
        .msg{
            position: relative;position: absolute;top:45px;bottom:50px;background:#f2f2f2;width:100%;overflow: hidden;overflow-y: auto;
            transition:all 0.1s;
            .more{
                position: fixed;top:86px;left:0;width:100%;height:30px;line-height: 30px;text-align:center;z-index: 999;
                transform-origin: top;transform: scaleY(0);transition: all 0.2s;
                &.open{
                    transform: scaleY(1);
                }
                .logins{
                    display:none;
                }
                span{
                    color:#2c90ff;font-size: 12px;cursor: pointer;
                }
                &[login="1"]{
                    span{
                        display:none;
                    }
                    .logins{
                        width:16px;display:block;display: inline-block;margin:0 auto;
                        img{
                            width:100%;
                        }
                    }
                }
            }
            &.open{
                bottom:250px;
            }
            .list{
                .item{
                    margin:27px 0;padding:0 10px;
                    .showtime{
                        text-align: center;font-size: 12px;padding:5px;
                        span{
                            display: inline-block;padding:2px 5px;background:#dadada;color:#fff;border-radius: 3px;
                        }
                    }
                    .tips{
                        text-align: center;
                        span{
                            display: inline-block;max-width: 220px;font-size: 12px;padding:2px 15px;border-radius: 10px;background:#dadada;color:#fff;
                        }
                    }
                    &::after{
                        content: "";display: block;clear: both;
                    }
                    .headpic{
                        width:50px;height:50px;float:left;
                        img{
                            width:100%;height:100%;border-radius:50%;
                        }
                    }
                    .content{
                        display: inline-block;max-width:60%;margin-left: 14px;margin-top:10px;padding:8px 10px;border-radius:5px;position: relative;
                        min-height: 25px;
                        &::after{
                            content: "";width:0;height:0;border:solid #fff 5px;border-width: 5px 8px;border-color:transparent #fff transparent transparent;
                            position: absolute;top:15px;left:-16px;
                        }
                        .status{
                            position:absolute;width:20px;height:20px;border-radius:50%;
                            text-align:center;line-height:20px;
                            top:10px;left:-25px;
                            &[type="2"]{//发送中
                                background:url('../assets/loading.gif');background-size:100% 100%;
                            }
                            &[type="1"]{//发送完成
                                color:red;
                            }
                            &[type="0"]::after{
                                content:'!';font-size: 16px;
                            }
                            &[type="0"]{//失败
                                background:red;color:#fff;
                            }
                        }
                        pre{
                            display: inline-block;margin:0; text-align: justify;font-size: 16px;line-height: 1.5em;
                            white-space: pre-wrap; word-break: break-all;
                            color:#252525;-webkit-touch-callout: text; -webkit-user-select: text;-khtml-user-select: text;-moz-user-select: text; -ms-user-select: text; user-select: text;

                        }
                        &.pic{
                            padding:3px;font-size:0px;
                        }
                        .msgpic{
                            max-width:100px;max-height:200px;
                        }
                        &.video{
                            padding:2px;font-size: 0;
                        }
                    }
                    &[type="1001"]{
                        .content{
                            background:#ffffff;
                        }
                    }
                    &[type="1002"]{
                        .content{
                            background:#6098f9;float: right;margin-left: 0;margin-right: 14px;
                            &::after{
                                left:auto;right:-16px;border-color:transparent transparent transparent #6098f9;
                            }
                        }
                        .headpic{
                            float: right;
                        }
                    }
                }
            }
        }
        .input{
            height:50px;background:#fff;position: absolute;bottom:0px;font-size:0px;line-height:50px;width:100%;
            box-shadow: 0 1px 3px #acacac;transition:all 0.1s;
            &.open{
                bottom:200px;
            }
            .opt_btn{
                display:inline-block;width:40px;text-align:center;line-height:50px;
                img{
                    width:24px;height:24px;margin:7px 0;padding:6px;
                }
            }
            .right{
                display:none;
            }
            button{
                font-size: 12px;height:30px;margin:10px 2px;line-height: 28px;vertical-align: top;
                background:#0f85ff;border:none;color:#fff;width:36px;border-radius:3px;padding:0 5px;
                &:active{
                    background:#0c6acf;
                }
            }
            textarea{
                font-size: 14px;background:#f2f2f2;border:none;border-radius: 5px;margin:0;padding:0;line-height: 36px;
                width:calc(100% - 150px);margin:7px 5px;height:36px;vertical-align: top;padding:0 10px;resize:none;
                &::-webkit-input-placeholder{
                    color:#cacaca;
                }
            }
        }
        .optbox{
            height:200px;position: absolute;bottom:-200px;width:100%;transition:all 0.1s;outline:none;
            &.open{
                bottom:0px;
            }
            &[type="more"]{
                .item{
                    text-align:center;font-size:0;margin:10px 0;
                    .icon{
                        display:inline-block;background:#f2f2f2;margin:0 10px;text-align:center;width:60px;height:60px;border-radius:8px;
                        img{
                            width:30px;height:30px;margin:10px;padding:5px;
                        }
                    }
                    span{
                        font-size:14px;display:block;line-height:16px;
                    }
                }
            }
            &[type="voice"]{
                display: flex;
                span{
                    width:100px;height:100px;display:inline-block;margin:auto;border-radius:50%;text-align: center;
                    // background: -webkit-radial-gradient(#6098f9,#7bc1fd); /* Safari 5.1 - 6.0 */
                    // background: -o-radial-gradient(#6098f9,#7bc1fd); /* Opera 11.6 - 12.0 */
                    // background: -moz-radial-gradient(#6098f9,#7bc1fd); /* Firefox 3.6 - 15 */
                    background: url(../assets/yuy.png) no-repeat #7bc1fd;background-position:center; /* 标准的语法 */
                    &:active{
                        background: url(../assets/yuy.png) no-repeat #6098f9;
                        background-position:center;
                    }
                    img{
                        display:inline-block;width:40px;height:40px;margin:30px;
                    }
                }
            }
            &[type="faces"]{
                overflow:hidden;overflow-y:auto;
                .imgpic{
                    text-align:justify;
                    img{
                        display:inline-block;width:25px;height:25px;padding:5px;
                    }
                }
            }
        }
    }
    #show_user_info{
        position: fixed;top:100%;left:0;width:100%;z-index: 90;background:#fff;opacity: 0;transition: all 0.3s;margin-top: 40px;height:calc(100% - 40px);
        &.open{
            top:0%;opacity: 1;
        }
        .show_user_info{
            height:calc(100% - 46px);overflow-y: auto;
            .wx_user_info{
                height:70px;padding:50px 0;position: relative;overflow: hidden;
                .bg{
                    position: absolute;top:-15px;width:calc(100% + 30px);height:calc(100% + 30px);left:-15px;z-index: -1;
                    -webkit-filter: blur(6px);filter: blur(6px);opacity: 0.6;
                }
                .headpic{
                    width:50px;height:50px;border-radius: 50%;margin:0 auto;
                    img{
                        width:100%;height:100%;border-radius: 50%;
                    }
                }
                .nickname{
                    text-align: center;font-size: 16px;line-height: 20px;margin:0;
                }
            }
            .save_btn{
                border-radius: 0;margin:10px;width:calc(100% - 20px);height:40px;line-height: 40px;background:#44bb00;color:#fff;
            }
        }
    }
    #show_user_tags{
        position: fixed;top:100%;left:0;width:100%;height:calc(100% - 40px);z-index: 90;background:#fff;opacity: 0;transition: all 0.3s;margin-top: 40px;
        &.open{
            top:0%;opacity: 1;
        }
        .show_user_tags{
            height:calc(100% - 46px);overflow-y: auto;
            .user_tags{
                padding:5px;font-size:16px; text-align: justify;
                .title{
                    margin:0;font-size: 14px;color:#969696;
                }
                .van-tag{
                    margin-right: 5px;
                }
            }
            .edit_user_tags{
                padding:5px;
                .title{
                    text-align: center;font-size: 12px;color:#4a4acf;margin:0;border:1px solid #eee;border-width: 0 0 1px;padding-bottom: 10px;;
                }
                .item{
                    padding:5px;
                    .van-tag{
                        margin-right: 5px;font-size:16px;
                    }
                    .title{
                        text-align: left;font-size: 14px;margin:5px 0;color:#666;border-width: 0;padding:0;padding-top: 5px;
                    }
                }
            }
        }
    }
</style>
